<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    :before-close="cancel"
    width="800px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" class="dialog-form">
      <el-form-item label="角色模板" class="block-label" prop="roleName">
        <el-button
          size="mini"
          v-for="(item, index) of templatesList"
          :key="index"
          @click="handleChangeTemplates(item, index)"
          :type="buttonIndex == index ? 'primary' : ''"
          >{{ item.templateName }}</el-button
        >
      </el-form-item>

      <el-form-item label="助手昵称" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入助手昵称" />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="对话语言" prop="language">
            <el-select v-model="form.language" placeholder="请选择对话语言">
              <el-option
                v-for="(item, index) in languages"
                :key="index"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色音色" prop="voiceName">
            <el-select v-model="form.voiceName" placeholder="请选择角色音色">
              <el-option
                v-for="(item, index) in volcengineVoicesList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="" prop="roleDesc">
        <div class="intell-txt">
          <label>角色介绍</label>
          <el-button type="text" @click="handleChangeAI">✨ AI一键优化</el-button>
        </div>
        <el-input
          v-model="form.roleDesc"
          type="textarea"
          maxLength="200"
          placeholder="请输入角色介绍"
        />
      </el-form-item>

      <el-form-item label="语言模型" prop="modelId">
        <el-select v-model="form.modelId" placeholder="请选择语言模型">
          <el-option
            v-for="(item, index) of modelsList"
            :key="index"
            :label="item.configName"
            :value="item.configId"
          />
        </el-select>
          <div>改变模型后，建议清空记忆体，以免影响体验。</div>
      </el-form-item>

      <el-collapse class="intel-collapse" v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title"> 高级设置 </template>
          <el-form-item label="角色语速" prop="speechSpeed">
            <el-select v-model="form.speechSpeed" placeholder="请选择角色语速">
              <el-option
                v-for="(item, index) in defaultModel"
                :key="index"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="语音识别速度" prop="identifySpeed">
            <el-select v-model="form.identifySpeed" placeholder="请选择语音识别速度">
              <el-option
                v-for="(item, index) in defaultModel"
                :key="index"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="角色音调" class="intell-slide-item" prop="tone">
            <div class="intell-slider">
              <el-slider
                class="slider"
                v-model="form.tone"
                :step="1"
                :min="-2"
                :max="2"
              />
            </div>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  volcengineVoicesList,
  languages,
  defaultModel,
  rules,
} from "./volcengineVoicesList";
import { saveAgents } from "@/api/login";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    modelsList: {
      type: Array,
      default: [],
    },
    templatesList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      form: {
        nickName: null,
        language: "",
        speechSpeed: "",
        identifySpeed: "",
        tone: 0,
        roleName: "",
        roleDesc: "",
        modelId: null,
        voiceName: "",
      },
      rules,
      activeNames: [],
      defaultModel,
      languages,
      volcengineVoicesList,
      buttonIndex: null,
      loading: false,
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    resetFormFun() {
      this.form = {
        nickName: null,
        language: "",
        speechSpeed: "",
        identifySpeed: "",
        tone: 0,
        roleName: "",
        roleDesc: "",
        modelId: null,
        voiceName: "",
      };
      this.resetForm("form");
    },
    async submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const { form } = this;
            this.loading = true;
            await saveAgents(form);
            this.$modal.msgSuccess("添加成功");
            this.resetFormFun();
            this.cancel();
            this.$emit("getList");
          } catch (error) {
            console.error("添加错误", error);
          } finally {
            this.loading = false;
          }
        }
      });
    },
    handleChange(val) {
      console.log(val);
    },
    handleChangeTemplates(item, index) {
      console.log(item);
      this.form.roleName = item.templateName;
      this.form.roleDesc = item.templateContent;
      this.buttonIndex = index;
    },
    handleChangeAI() {
      this.$modal.msgSuccess("优化成功");
    },
  },
};
</script>

<style scoped lang="scss">
.intell-slider {
  display: flex;
  .slider {
    max-width: 300px;
    width: 100%;
  }
}
.intell-txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .block-label label {
  display: block;
  float: none;
  text-align: left;
}
.dialog-form .el-select {
  width: 100%;
}
</style>
<style>
.intel-collapse,
.intel-collapse .el-collapse-item__header {
  border-bottom: none;
  border-top: none;
}
.intel-collapse .el-collapse-item__header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.intel-collapse .el-collapse-item__arrow {
  margin: 0 10px;
}
.intell-slide-item label {
  float: none;
}
</style>
